<template>
  <el-table :data="tableData" v-loading="tableLoading">
    <el-table-column align="center" label="序号" type="index" width="80"></el-table-column>
    <el-table-column align="center" label="业务名称" prop="businessName"></el-table-column>
    <el-table-column align="center" label="流程选择">
      <template #default="{ row }">
        <el-select v-model.number="row.processFormFlowId" placeholder="请选择流程">
          <el-option v-for="(item, index) in formFlowList" :key="index" :label="item.processName"
            :value="item.id"></el-option>
        </el-select>
      </template>
    </el-table-column>
    <el-table-column align="center" label="操作">
      <template #default="{ row }">
        <!-- <el-button type="primary" :icon="Edit">重置</el-button> -->
        <el-button :disabled="!row.processFormFlowId" type="primary" :icon="Select"
          @click="editProcess(row)">确定</el-button>
      </template>
    </el-table-column>
  </el-table>
</template>
<script setup>
import { ref } from 'vue'
import { Select } from '@element-plus/icons-vue'
import { getFormFlow } from '@/api/flowable/form'
import { getProcessList, setProcess } from '@/api/equipment/process'
const tableLoading = ref(false)
const tableData = ref([])
let formFlowList = []
const initData = {
  appName: 'equipment',
  status: '启用',
  page: 1,
  pageSize: 1000
}
async function init() {
  tableLoading.value = true
  /** 查询表单选项 */
  await getFormFlow(initData).then(res => {
    // console.log(res)
    formFlowList = res.data.data.records
  })
  /** 查询流程列表 */
  await getProcessList().then(res => {
    // console.log('list', res)
    tableData.value = res.data.data
  })

  tableLoading.value = false
}
init()
async function editProcess(row) {
  console.log(row)
  await setProcess(row).then(res => {
    ElMessage.success(res.data.data)
    init()
  })
}
</script>
<style></style>